<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"


      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">

    <ui:composition template="template.xhtml">
        <ui:define name="content">
             <p:panel style="width: 100%!important;">
                <h:panelGrid columns="3" style="width:100%;">
                    <p:dataTable id="datalist" value="#{carritoController.addProductos}" var="item">
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Codigo"/>
                            </f:facet>
                            <h:outputText value="#{item.ASIN}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Descripcion"/>
                            </f:facet>
                            <h:outputText value="#{item.title}"/>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Cantidad"/>
                            </f:facet>
                            <p:spinner id="minMax" value="#{carritoController.cantidad}" min="0" max="20" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Eliminar"/>
                            </f:facet>
                            <p:commandButton icon="ui-icon-closethick" title="Eliminar" 
                                             actionListener="#{carritoController.quitar(item)}" 
                                             update="datalist"/>
                        </p:column>
                        <f:facet name="footer">
                        </f:facet>
                    </p:dataTable>
                </h:panelGrid>
                <p:carousel value="#{productosController.itemsProductos}" 
                            var="car" numVisible="5"
                            itemStyleClass="carItem" style="width: 100%!important; height: 100px" circular="true">
                    <f:facet name="header">
                        <h:panelGrid columns="3">
                            <p:selectOneMenu id="selectOneMenuResponsable" value="#{carritoController.filtrador}" 
                                             >
                                <f:selectItems value="#{carritoController.groupThemes}"
                                               var="usuarioItem"
                                               itemValue="#{usuarioItem}"
                                               itemLabel="#{usuarioItem}"/>
                            </p:selectOneMenu>
                            <span class="ui-separator">
                                <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                            </span>
                            <h:outputText value="Productos" style="font-weight: bold; color: #CE3C2D"/> 
                        </h:panelGrid>
                    </f:facet>
                    <h:panelGrid columns="2"  cellpadding="5" columnClasses="label,value" >
                        <f:facet name="header">
                            <p:graphicImage value="Eshopper/images/shop/product8.png" width="60" height="60"/> 
                        </f:facet>
                        <h:outputText value="Titulo:" style="font-weight: bold; color: #0480be"/>
                        <h:outputText value="#{car.title}" />

                        <h:outputText value="ASIN:" style="font-weight: bold; color: #0480be"/>
                        <h:outputText value="#{car.ASIN}" />

                        <h:outputText value="Grupo:" style="font-weight: bold; color: #0480be"/>
                        <h:outputText value="#{car.group}"/>

                        <h:outputText value="Rango_Precio:" style="font-weight: bold; color: #0480be"/>
                        <h:outputText value="#{car.salesrank}" />

                        <h:outputText value="Valoracion:" style="font-weight: bold; color: #0480be"/>
                        <p:rating value="#{productosController.conversion(car.avg_rating)}" readonly="false" disabled="true"/>

                        <h:outputText value="Descargas:" style="font-weight: bold; color: #0480be"/>
                        <h:outputText value="#{car.downloaded}" />
                        <span class="ui-separator">
                            <span class="ui-icon  ui-icon-grip-dotted-vertical" />
                        </span>
                        <p:commandButton id="createButton" icon="ui-icon-plus" 
                                         actionListener="#{carritoController.agregar(car)}" 
                                         update=":formulario:datalist"
                                         value="Agregar"  />

                        <f:facet name="footer">
                            <h:panelGrid columns="3">

                            </h:panelGrid>
                        </f:facet>
                    </h:panelGrid>

                    <f:facet name="footer">
                        Son #{productosController.itemsProductos.size()} productos encontrados.
                    </f:facet>
                </p:carousel>
        </p:panel>
        </ui:define>
    </ui:composition>

</html>
